<template>
  <div class="picture-list">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <!-- 列表项渲染模板 -->
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 单张图片卡片：可点击，显示图片及信息 -->
          <a-card hoverable @click="doClickPicture(picture)">
            <!-- 卡片封面图 -->
            <template #cover>
              <img
                style="height: 180px; object-fit: cover"
                :alt="picture.name"
                :src="picture.thumbnailUrl ?? picture.uri"
                loading="lazy"
              />
            </template>

            <!-- 卡片元信息：名称 + 描述（分类+标签） -->
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <!-- 分类标签 -->
                  <a-tag color="green">
                    {{ picture.category ?? '默认' }}
                  </a-tag>
                  <!-- 标签列表 -->
                  <a-tag v-for="tag in picture.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
              </template>
              <!-- 展示操作按钮 -->
            </a-card-meta>
            <ShareModel ref="showModelRef" :link="shareLink" />
            <template #actions v-if="showOp">
              <EditOutlined @click="(e) => doEdit(picture, e)" />
              <ShareAltOutlined @click="(e) => doShare(picture, e)" />
              <SearchOutlined @click="(e) => doSearch(picture, e)" />
              <DeleteOutlined @click="(e) => doDelete(picture, e)" />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { deletePictureUsingPost } from '@/api/pictureController'
import {
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { ref, withDefaults } from 'vue'
import { useRouter } from 'vue-router'
import ShareModel from './ShareModel.vue'

// 定义组件接收的Props类型
interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
}

// 定义Props并设置默认值
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
})
// 路由跳转逻辑（点击图片进入详情页）
const router = useRouter()
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
const showModelRef = ref()
const shareLink = ref('')
//分享
const doShare = (picture: API.PictureVO, e) => {
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.id}`
  if (shareLink.value) {
    showModelRef.value.openModal()
  }
}
//编辑
const doEdit = (picture: API.PictureVO, e) => {
  e.stopPropagation()
  router.push({
    path: '/add_picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}

//搜索
const doSearch = (picture: API.PictureVO, e) => {
  e.stopPropagation()
  window.open(`/search_picture?pictureId=${picture.id}`)
}

//删除
const doDelete = async (picture: API.PictureVO, e) => {
  e.stopPropagation()
  const id = picture.id
  if (id === null || id === undefined) {
    message.warning('图片ID不存在，无法删除')
    return
  }

  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    // 让外层刷新列表
    props?.onReload
  } else {
    message.error(`删除失败：${res.data.message || '未知错误'}`)
  }
}
</script>
